<template>
  <view>
    <van-tabs :active="active" @change="onChange">
      <van-tab title="全部">
        <block v-for="(item, index) in allOrderList" :key="index">
          <van-panel :title="'订单编号：' + item.order_number" use-footer-slot>
            <view>
              <block v-for="(item, i2) in item.order_detail" :key="i2">
								<van-card :num="item.count" :price="item.price" :title="item.name" :thumb="item.pic" />
							</block>
            </view>
            <view slot="footer">
              <text>共 {{item.total_count}} 件商品, 订单金额 ￥{{item.total_price}} 元</text>
            </view>
          </van-panel>
        </block>
      </van-tab>
      <van-tab title="待付款">
				<block v-for="(item, index) in waitOrderList" :key="index">
          <van-panel :title="'订单编号：' + item.order_number" use-footer-slot>
            <view>
              <block v-for="(item, i2) in item.order_detail" :key="i2">
								<van-card :num="item.count" :price="item.price" :title="item.name" :thumb="item.pic" />
							</block>
            </view>
            <view slot="footer">
              <text>共 {{item.total_count}} 件商品, 订单金额 ￥{{item.total_price}} 元</text>
            </view>
          </van-panel>
        </block>
			</van-tab>
      <van-tab title="已付款">
				<block v-for="(item, index) in finishOrderList" :key="index">
          <van-panel :title="'订单编号：' + item.order_number" use-footer-slot>
            <view>
              <block v-for="(item, i2) in item.order_detail" :key="i2">
								<van-card :num="item.count" :price="item.price" :title="item.name" :thumb="item.pic" />
							</block>
            </view>
            <view slot="footer">
              <text>共 {{item.total_count}} 件商品, 订单金额 ￥{{item.total_price}} 元</text>
            </view>
          </van-panel>
        </block>
			</van-tab>
    </van-tabs>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      allOrderList: [], // 全局
      waitOrderList: [], // 待付款
      finishOrderList: [] // 已付款
    }
  },
  onLoad() {
    this.getOrderlist()
  },
  methods: {
    // 监听tab栏切换的事件
    onChange(e) {
      this.active = e.detail.index
      this.getOrderlist()
    },

    async getOrderlist() {
      const res = await this.request({
        url: '/my/orders/all',
        data: {
          // type 1, 2, 3
          type: this.active + 1
        },
        header: {
          Authorization: uni.getStorageSync('token')
        }
			})
			
			res.message.orders.forEach(item => {
				item.order_detail = JSON.parse(item.order_detail)
			})

      if (this.active === 0) {
        this.allOrderList = res.message.orders
      } else if (this.active === 1) {
        this.waitOrderList = res.message.orders
      } else if (this.active === 2) {
        this.finishOrderList = res.message.orders
      }
    }
  }
}
</script>

<style>
</style>
